﻿<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>我的足迹</title>
    <script src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=ABQIAAAAPTwhF4vlVXrO7ZGOjA9sOxTqQ5WtUwE0C8FR1hRk-yj3qFOmhhR6esbxCerNyfzApAoTJGfOHzcKCQ&sensor=false"
            type="text/javascript"></script>
    <script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
		map.addControl(new GLargeMapControl ());
        map.addControl(new GScaleControl());
        // 允许使用鼠标滚轮缩放
        map.enableScrollWheelZoom();
		// 设置地图为全国视野，以便看到北京，上海，广州
        map.setCenter(new GLatLng(34.597, 106.083), 5);
        document.getElementById("map_zoom").innerHTML = map.getZoom();

        // 用于创建折线的点数组
        var points = [];
        //  北京
        var tabContents = [['简介', '<h3>北京</h3>'],
                           ['照片', '<img src="http://mw2.google.com/mw-panoramio/photos/medium/436377.jpg" style="width:300px; height:300px">']];
        var point = new GLatLng(39.917, 116.397);
        points.push(point);
        addMarker(map, point, tabContents);

        // 上海
        tabContents = [['简介', '<h3>上海</h3>'],
                       ['照片', '<img src="http://mw2.google.com/mw-panoramio/photos/medium/33763.jpg" style="width:300px; height:300px">']];
        point = new GLatLng(31.224, 121.475);
        points.push(point);
        addMarker(map, point, tabContents);
        
        // 广州
        tabContents = [['简介', '<h3>广州</h3>'],
                       ['照片', '<img src="http://mw2.google.com/mw-panoramio/photos/medium/1107611.jpg" style="width:300px; height:300px">']];
        point = new GLatLng(23.134, 113.322);
        points.push(point);
        addMarker(map, point, tabContents);

        // 添加折线
        map.addOverlay(new GPolyline(points));

        GEvent.addListener(map, "zoomend", function() {
          document.getElementById("map_zoom").innerHTML = map.getZoom();
        });
      }
    }
	
    function addMarker(map, point, tabContents) {
      var tabs = [];
      // 生成tab内容
	  for (var i = 0; i < tabContents.length; i++) {
	    tabs.push(new GInfoWindowTab(tabContents[i][0], tabContents[i][1]));
	  }

       // 创建自己的图标
       var icon = new GIcon();
       icon.image = "http://maps.google.com/mapfiles/kml/shapes/flag_maps.png";
       icon.shadow = "http://maps.google.com/mapfiles/kml/shapes/flag_maps_shadow.png";
       icon.iconSize = new GSize(40, 40);
       icon.shadowSize = new GSize(44, 40);
       icon.iconAnchor = new GPoint(6, 20);
       icon.infoWindowAnchor = new GPoint(5, 1);

	   var marker = new GMarker(point, icon);
       map.addOverlay(marker);
	  
      GEvent.addListener(marker, "click", function() {
        // 点击Marker时打开信息窗口，添加到Marker中， 设置窗口的宽度，默认页
        marker.openInfoWindowTabsHtml(tabs, {selectedTab : 1});
      });
    }

    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 900px; height: 700px"></div>
	<p>当前地图的缩放层次为: <span id="map_zoom"></span></p>
  </body>
</html>